<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我自己的VUE</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message.a">
    <div>{{message.a}}</div>
    <ul><li>我自己的vue</li></ul>
    {{test}}
</div>

<!--
    1.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化
    2.实现一个监听器Oberver，用来劫持并监听所有属性，如果有变动，就通知订阅者
    3.实现一个订阅者Watcher，可以收到属性的变化并通知并执行相应的函数，从而更新视图
-->
<script src="watcher.js"></script>
<script src="observer.js"></script>
<script src="compile.js"></script>
<script src="MVVM.js"></script>
<script>
    //我们的数据一般挂载在vm上
    //Object.defineproperty get和set
    //vue中实现双向绑定 1.模板的编译 2.数据劫持 观察数据变化 3.watcher
    let vm=new MVVM({
        el:'#app',//document.getElementById('app')
        data:{
            test:'cue',
            message:{
                a:"hello cue",
            },

        },
        // computed:{
        //     getNewName(){
        //         //  {{getNewName}}
        //         return this.message.a+"我是computed"
        //     }
        // },
        // methods:{
        //     change(){
        //         // <button v-on:click="change">更新操作</button>
        //         this.message.a='通过methods我改变了'
        //     }
        // }
    })
</script>
</body>
</html>
